<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=0,maximum-scale=0,user-scalable=yes,shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>表单设计器</title>
    <link rel="stylesheet" th:href="@{/pear/component/luminar/css/luminar.css}">
</head>

<body class="layui-layout-body">
<input type="hidden" th:value="${formId}" id="fromId">
<div style="height: 100%; width: 100%;" id="formdesigner">

</div>
<script th:src="@{/pear/component/layui/layui.js}"></script>
<script th:src="@{/pear/component/luminar/luminar.js}"></script>
<script th:src="@{/pear/component/luminar/js/Sortable/Sortable.js}"></script>
<script th:src="@{/pear/component/luminar/js/htmlformat.js}"></script>
<script th:src="@{/pear/component/luminar/js/jsformat.js}"></script>
<script th:src="@{/pear/component/luminar/js/iceEditor/iceEditor.js}"></script>
<script th:inline="javascript">
    let baseURL = /*[[@{/}]]*/ '';
    layui.use(['layer', 'jquery', 'formField', 'formDesigner'], function () {
        let $ = layui.jquery;
        let formDesigner = layui.formDesigner;
        let data = [];
        let render = formDesigner.render({
            data: data,
            elem: '#formdesigner'
        });


        /**
         * 保存设计
         */
        $('.saveJson').on('click', function () {
            let formName = $('#formName').val()
            let formType = $('#formType').val()
            let fieldData = JSON.stringify(render.getData(), null, 2)

            if (!formName) {
                layer.msg("请填写表单名称", {icon: 2, time: 1000});
                return
            }
            if (!formType) {
                layer.msg("请选择表单类型", {icon: 2, time: 1000});
                return
            }
            if (fieldData === "[]") {
                layer.msg("请构建好表单在保存", {icon: 2, time: 1000});
                return
            }

            let data = {
                "formName": formName,
                "formType": formType,
                "fieldData": fieldData
            }
            let loading = layer.msg('正在保存中...', {
                icon: 16,
                shade: 0.01,
                time: 0
            });
            $.ajax({
                url: baseURL + 'workflow/form/add',
                data: JSON.stringify(data),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    layer.close(loading);
                    if (result.code === 1000) {
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 1000
                        }, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                            parent.layui.table.reload("form-table");
                        });
                    } else {
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 1000
                        });
                    }
                },
                error: function () {
                    layer.close(loading);
                    layer.msg('服务器错误，请稍后再试！', {
                        icon: 2,
                        time: 1000
                    });
                }
            });

        });
    });
</script>

</body>

</html>
